<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>普通菜单</title>
<link href="../../../../src/css/assets/dpl/base.css" rel="stylesheet"/>
<link href="../../assets/dpl.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <h1>普通菜单</h1>

    <div id="menuitem_container" style="width:200px;position:relative;height:150px;">

    </div>
    <label>禁用：<input type="checkbox" id='dis'/></label>

    <br/>
    <h1>多选菜单</h1>

    <div id="menuitem_container2" style="width:200px;position:relative;height:150px;">

    </div>

</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use("node,menu,separator", function (S, Node, Menu,Separator) {

        var sb = new Menu.PopupMenu({
            // boolean，是否鼠标脱离菜单后自动隐藏
            // autoHideOnMouseLeave:true,
            width:160
        });

        sb.addChild(new Menu.Item({
            content:"submenuitem1"
        }));

        sb.addChild(new Menu.Item({
            content:"submenuitem2",
            disabled:true
        }));

        sb.addChild(new Separator());


        var sb2 = new Menu.PopupMenu({
            // boolean，是否鼠标脱离菜单后自动隐藏
            // autoHideOnMouseLeave:true,
            children:[
                new Menu.Item({
                    content:"submenuitem141"})
            ]
        });

        sb2.addChild(new Menu.Item({
            content:"submenuitem22"
        }));

        var b2 = new Menu.SubMenu({
            content:"sub-sub-menu",
            menu:sb2
        });

        sb.addChild(b2);

        var b = new Menu.SubMenu({
            content:"submenu",
            menu:sb
        });

        var menu = new Menu({
            render:"#menuitem_container",
            children:[b, new Menu.Item({
                content:"alone"
            })]
        });

        menu.render();

        menu.on("click", function (ev) {
            S.log("selected : " + ev.target.get("content"));
        });

        var dis = Node.one("#dis");

        dis.on("click", function () {
            menu.set("disabled", !!dis[0].checked);
        });

        dis[0].checked = false;

        new Menu({
            render:"#menuitem_container2",
            children:[
                {
                    checkable:true,
                    content:"checkable menuitem"
                },
                {
                    xclass:'separator'
                },
                {
                    xclass:'submenu',
                    content:'submenu',
                    menu:{
                        children:[
                            {
                                checkable:true,
                                content:"checkable menuitem1"
                            },
                            {
                                checkable:true,
                                content:"checkable menuitem2"
                            }
                        ]
                    }
                }
            ]
        }).render();
    });
</script>
</body>
</html>